<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>赠送礼品</title>
	<meta name="format-detection" content="telephone=no, address=no">
	<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- apple devices fullscreen -->
	<meta name="apple-touch-fullscreen" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<meta name="keywords" content="赠送礼品" />
	<meta name="description" content="" />
	{php echo register_jssdk(false);}
	<link href="//cdn.bootcss.com/weui/0.4.0/style/weui.min.css" rel="stylesheet">
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	
	<style>
	*{margin:0;padding:0;font-size:100%;color:inherit;background-size:100%}
/**gift*/
#reward-pay-box {
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	overflow-y: auto;
	background-color: #fff;
	z-index: 11;
	min-height:300px;
	overflow:hidden;
}

#reward-pay-box #reward-list-wrap {
	position: relative;
	background-color: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
	text-align: center
}

#reward-pay-box #reward-list-wrap .reward-gift-wrap {
	position: relative;
	display: inline-block;
	width: 80px;
	margin: 10px 0;
	text-align: center
}

#reward-pay-box #reward-list-wrap .reward-gift-wrap .selected {
	box-shadow: inset 0 1px 3px rgba(0,0,0,.075),0 0 8px rgba(0,134,255,.8)!important
}

#reward-pay-box #reward-list-wrap .reward-gift-wrap .reward-img-wrap {
	width: 55px;
	height: 55px;
	margin-left: 10px;
	overflow: hidden;
	outline: 0;
	border: none;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.075),0 0 8px hsla(220,8%,93%,.8)
}

#reward-pay-box #reward-list-wrap .reward-gift-wrap p {
	width: 100%;
	margin-top: 10px;
	font-size: 11px;
	color: #141414;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-o-text-overflow: ellipsis
}

#reward-pay-box #reward-list-wrap .reward-gift-wrap img {
	width: 100%;
	height: 100%
}

#reward-pay-box #reward-pay-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	z-index: 0;
	border-top: 40px solid #ebecee;
	border-left: 40px solid transparent
}

#reward-pay-box #reward-pay-close:active {
	border-top: 40px solid #e6e7e9
}

#reward-pay-box .closeicon {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 9999;
	font-size:16px;
	color: #4e4e4e;
	
}

#reward-pay-box #reward-price-wrap {
	position: relative;
	width: 100%;
	background-color: #f8f8f8
}

#reward-pay-box #reward-price-wrap .p-num {
	width: 100%;
	/*position: relative;*/
	padding: 8px
}

#reward-pay-box #reward-price-wrap .p-tel {
	width: 100%;
	padding: 8px 8px 0
}

#reward-pay-box #reward-price-wrap .pay-btn {
	position: absolute;
	right: 8px;
	width: 100px;
	height: 30px;
	border-radius: 2px;
	line-height: 30px;
	text-align: center;
	background-color: #f08700;
	font-size: 14px;
	color: #fff
}

#reward-pay-box #reward-price-wrap .pay-btn:active {
	background-color: #ff9b14
}

#reward-pay-box #reward-price-wrap .label {
	font-size: 12px;
	color: #a0a0a0;
	display: inline-block
}

#reward-pay-box #reward-price-wrap .warn {
	font-size: 11px;
	color: #b9b9b8
}

#reward-pay-box #reward-price-wrap .tel-warn {
	font-size: 11px;
	color: #b9b9b8;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

#reward-pay-box #reward-price-wrap .price {
	font-size: 12px;
	color: #ff5f5f;
	font-weight: 700
}

#reward-pay-box #reward-price-wrap .price #total_price {
	font-style: normal
}

#reward-pay-box #reward-price-wrap .tel {
	width: 105px
}

#reward-pay-box #reward-price-wrap .number {
	width: 55px
}

#reward-pay-box #reward-price-wrap input {
	/*font-size: 12px;
	height: 30px;
	padding-left: 8px;
	border: 1px solid #b3b6b8*/
}

#reward-pay-box #reward-num-wrap {
	width: 100%;
	background-color: #fff
}

#reward-pay-box #reward-num-wrap p {
	padding: 8px;
	font-size: 11px;
	color: #a0a0a0
}

#reward-pay-box #reward-num-wrap div {
	/*position: relative;*/
	width: 100%;
	padding-left: 8px;
	height: 40px;
	line-height: 40px;
	border-top: 1px solid #e0e0e0;
	font-size: 12px;
	color: #a0a0a0
}

#reward-pay-box #reward-num-wrap div img {
	width: 30px;
	height: 30px;
	vertical-align: middle
}

#reward-pay-box #reward-num-wrap div .total {
	position: absolute;
	right: 8px
}

#reward-pay-box #reward-num-wrap .num {
	font-style: normal;
	color: #141414
}

#reward-pay-box #reward-num-wrap .detail {
	font-style: normal;
	font-size: 11px;
	color: #1e78dc
}

#reward-pay-box #reward-num-wrap .line {
	font-style: normal;
	padding: 0 5px
}
#toast {
    display: none;
    position: fixed;
    padding: 9px 15px;
    background-color: #333;
    z-index:9999999999;
    border-radius: 5px;
	font-size: 15px;
    color: #ffffff;
    line-height: 25px;
    text-align: center;
	
}
.num_div,.heji,.price_div{height:26px;text-align:Center;line-height:26px;font-size:12px;}
.gw_num{border: 1px solid #dbdbdb;width: 97px;line-height: 26px;overflow: hidden;}
.gw_num i{display: block;height: 26px;width: 26px;float: left;color: #ff6a00;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style:normal;}
.gw_num .num{display: block;color:#ff6a00;float: left;text-align: center;width: 42px;font-style: normal;font-size: 14px;line-height: 26px;border: 0;}
.gw_num i.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
em,input{margin:0;padding:0;}
	</style>
</head>
<body>

<div class="container container-fill">
{if !empty($gifts) && $list['gift_show']=='1'}
					<div id="reward-layer-box">
						<div id="reward-pay-box" style="position:absolute;left:0;top:0">
							<div id="reward-list-wrap" class="clearfix">
								{if !empty($gifts)}
								{loop $gifts $key $row}
										<div class="reward-gift-wrap">
										<div class="reward-img-wrap {if $key=='0'}selected{/if}" onclick="change_gift('{$row['id']}','{$listid}')" id="gift_{$row['id']}" data-one="{$row['money']}" data-type="{$row['id']}">
										<img src="{php echo tomedia($row['img'])}" width=55 height=55 />
										</div>
										<p>{$row['name']}</p>
										</div>
								{/loop}
								{/if}	
								
							</div>
							<div id="reward-price-wrap" style="height: 30px;padding: 10px 0 10px 0;">
								<div class="num_div" style="margin:0 10px 0 10px;float:left">数量</div>
								<div class="gw_num" style="float:left">
									
									<i class="iconfont jian">-</i>
									<input type="num" value="1" class="num" id="gift_number" oninput="number_change()" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')">
									<i class="iconfont add">+</i>
								</div>
								<div class="heji" style="margin-left:10px;float:left">合计</div>
								<div class="price_div"style="float:left;color: #ff5f5f;">￥
								<i id="total_price">{$gifts[0]['money']}</i>
								</div>
								<div class="pay-btn" onclick="gift_pay()" style="float:right">立即支付</div>
							</div>
							<div style="clear:both"></div>
							<div id="reward-num-wrap">
								<p>
								<span>共</span><span class="num" id="donateTimes">
								{if empty($gifts_person)}0{else}{$gifts_person}{/if}</span><span>人参与</span>
								</p>
								{if !empty($gifts)}
								{loop $gifts $row}
								<div><img src="{php echo tomedia($row['img'])}"><span>&nbsp;</span><i class="num">{$row['name']}</i><span class="total"><span>累计数量&nbsp;</span><i class="num" id="send_{$row['id']}">
								{if !empty($row['nums'])}{$row['nums']}{else}0{/if}</i><i class="line">|</i><i class="detail"><a href="{php echo $this->createMobileUrl('dashang_detail',array('gift_id'=>$row['id'],'categoryid'=>$categoryid,'listid'=>$listid))}" style="color:blue">明细</a></i></span>
								</div>
								{/loop}
								{/if}
							</div>
						</div>
					</div>
				{/if}
</div>
<div id="toast"></div>
<script>
$(document).ready(function(){
	 $(".add").click(function(){
		  var n=$(this).prev().val();
		  if(n=='' || isNaN(Number(n))){
				n = 0;
		  }
		  var num=parseInt(n)+1;
		  $(this).prev().val(num);
		  $('#total_price').text(parseFloat($(".selected").attr("data-one")*num).toFixed(2));
	  });
			//减的效果
	$(".jian").click(function(){
		var n=$(this).next().val();
		if(n=='' || isNaN(Number(n))){
			n = 0;
		}
		var num=parseInt(n)-1;
		$(this).next().val(num);
		$('#total_price').text(parseFloat($(".selected").attr("data-one")*num).toFixed(2));
	});
});	
function change_gift(gift_id,listid){
	if(gift_id != '' && listid!=''){
		$(".reward-img-wrap").removeClass('selected');
		if($("#gift_"+gift_id).length>0){
			$("#gift_"+gift_id).addClass('selected');
			var gift_number = parseInt($("#gift_number").val());
			if(gift_number > 0){
				$("#total_price").text(parseFloat($("#gift_"+gift_id).attr("data-one")*gift_number).toFixed(2));
			}
			
		}
	}
}
function number_change(){
	var gift_number = parseInt($("#gift_number").val());
	
	if(!isNaN(gift_number) && gift_number > 0){
		var gift_id = $(".selected").attr("data-type");
		$('#total_price').text(parseFloat($("#gift_"+gift_id).attr("data-one")*gift_number).toFixed(2));
	}
}
function close_gift_list(){
	talk_can_scroll();
	$("body").animate({scrollTop:0},600);
	$("#talk").animate({scrollTop:0},600);
	$("#reward-layer-box").hide();
	$("#review_box").show();
}
function number_focus(){
	$("body").animate({scrollTop: document.body.clientHeight},600);
}
function gift_pay(){
		var money  = $('#total_price').text();
		if(Number(money)=='' || Number(money)<=0){
			_loading_toast._show('请输入正常的礼物数量');
			return false;
		}else if(Number(money)<0.01){
			_loading_toast._show('礼物金额不能小于0.01元');
			return false;
		}
		if(isNaN(Number($("#gift_number").val()))){
			_loading_toast._show('礼物数量必须是大于0的数字');
			return false;
		}
		var i = _meepoajax._querystring('i');
		var j = _meepoajax._querystring('j');
		var post_url = './index.php?i='+i+'&j='+j+'&c=entry&do=oauth_wechatpay&m=meepo_online';
		$.ajax({
				type:'post',
				data:{'gift_number':$("#gift_number").val(),'money':money,'type':$(".selected").attr("data-type"),'content':$(".selected").next().text(),'listid':'{$listid}','category_id':'{$categoryid}','oauth_openid':'{$user['oauth_openid']}','topenid':'{$user['openid']}'},
				url:post_url,
				dataType:"json",
				success: function(json){
					if(json.errno=='1'){
					  window.location.href = json.message;
					}else{
					  _loading_toast._show(json.message);
					}
				}	
			})
		
	}
var _loading_toast= {
    _center: function() {
		var _left = ($(window).width() - $("#toast").outerWidth()) / 2 + "px";
        $("#toast").css({
            "top": "50%",
            "left": _left
        });
    },
    _show: function(text, fun) {
        $("#toast").html(text);
        _loading_toast._center();
        $("#toast").show();
        $("#toast").bind("resize", _loading_toast._center);
        setTimeout(function() {
            _loading_toast._hide(fun);
        }, 3 * 1000);
    },
	_show2: function(text, fun) {
        $("#toast").html(text);
        _loading_toast._center();
        $("#toast").show();
        $("#toast").bind("resize", _loading_toast._center);
        setTimeout(function() {
            _loading_toast._hide(fun);
        }, 1000);
    },
    _hide: function(fun) {
        $("#toast").hide();
        $("#toast").unbind("resize");
        if (fun) {
            (fun)();
        }
    }
};
var _meepoajax = {
	_querystring : function(name){ 
		var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i")); 
		if (result == null || result.length < 1){ 
			return "";
		}
		return result[1]; 
	}
};
</script>
   
</body>
</html>

